import { useEffect, useMemo, useState } from "react";
import { Button } from "../../components";
import useToggleMark from "../hooks/toggle-mark";
import { Dropdown, MenuProps } from "antd";
import { useSlate } from "slate-react";

export default () => {
  const { toggleMark,markValue } = useToggleMark();
  const[size,setSize]=useState<string>('14');
  const editor = useSlate();

  const items = useMemo(() => {
    return [12, 14, 16, 18, 20, 22, 24, 26, 34, 48].map((item: number) => {
      return {
        key: `${item}`,
        label: <span style={{ fontSize: `${item}px` }}>{item}</span>
      };
    });
  }, []);

  const onClick: MenuProps['onClick'] = (e) => {
    setSize(e?.key)
    toggleMark("style-fontSize", `${e?.key}px`); 
  };

  useEffect(()=>{
    const value=markValue('style-fontSize',size)
    
    if(editor.selection){
      setSize(value||'14');
    }
  
},[markValue]);

  return (
    <Dropdown
      menu={{ items,onClick }}
      placement="bottom"
      autoAdjustOverflow
      arrow={{ pointAtCenter: true }}
    >
      <Button size="large" onClick={(e) => e.preventDefault()}>{size}</Button>
    </Dropdown>
  );
};
